
<template>
    <div class="contianer">
        <el-row :gutter="20">
            <el-col :span="16">
                <div class="grid-content bg-purple">
                    <h1 v-html="tableData.title"></h1>
                    <i class="el-icon-time" /><span>于</span><span v-html="tableData.createdTime"></span><samp>创建</samp>
                    <i class="el-icon-view" /><samp v-html="tableData.clickCount"></samp>
                    <i class="el-icon-star-off" /><samp>收藏&nbsp;</samp><samp v-html="tableData.collectCount"></samp>
                    <div class="PSrticletag">
                        <el-tag v-for="item in tagList.slice(0, 3)" :key="item[1]" :type="item[0]" effect="dark">
                            {{ item[1] }}
                        </el-tag>
                    </div>
                    <p v-html="tableData.content"></p>

                    <!-- 收藏点赞 -->
                    <!-- <div class="articleFooter">
                        <el-badge :value="1000" class="item" :type="isLike ? 'success' : 'info'" :max=999 id="badge">
                            <el-tooltip content="点赞" placement="top" effect="light">
                                <div :class="isLike ? 'like' : 'noLike'" @click="like()"></div>
                            </el-tooltip>
                        </el-badge>
                        <el-badge :value="2000" class="item" :type="isCollect ? 'success' : 'info'" :max=999>
                            <el-tooltip content="收藏" placement="top" effect="light">
                                <div :class="isCollect ? 'collect' : 'noCollect'" @click="collect()"></div>
                            </el-tooltip>
                        </el-badge>



                        <el-badge :value="2" class="item" :type="'info'">
                            <el-tooltip content="评论" placement="top" effect="light">
                                <div class="comment" @click="drawer = true"></div>
                            </el-tooltip>
                        </el-badge>


                    </div>

                    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false" :model="false"
                        :close-on-click-modal="false">
                        <span>我来啦!</span>
                    </el-drawer> -->



                </div>
            </el-col>
            <!-- <el-col :span="8">
                <div class="left">
                </div>
            </el-col> -->


        </el-row>


    </div>
</template>




<script>
export default {
    name: 'previewArticle',
    data() {
        return {
            tagList: [
                { type: '', label: '标签一' },
                { type: 'success', label: '标签二' },
                { type: 'info', label: '标签三' },
                { type: 'danger', label: '标签四' },
                { type: 'warning', label: '标签五' }
            ],
            tableData: {
                id: '标识',//id标识
                title: '',//博客标题
                summary: '',//博客简介
                content: '',//博客内容
                tagUid: '',//标签uid
                clickCount: '',//博客点击数
                collectCount: '',//博客收藏数
                fileUid: '',//标题图片uid
                createdTime: '',//创建时间
                modifiedTime: '',//更新时间
                isOriginal: "原创",//原创
                author: '',//作者
                articlesPart: '',//文章出处
                openComment: '',//是否开启评论
            },
            isLike: false,//是否已经点赞
            isCollect: false,//是否已经点赞
            drawer: false,//评论抽屉

        }
    },
    created() {
        this.getFrom()

    },
    methods: {
        //获取文章编辑页面
        getFrom() {
            //获取文章
            var arr = window.localStorage.getItem("formData");
            this.tableData = JSON.parse(arr);

            //获取标签
            var tag = window.localStorage.getItem("tagList");
            this.tagList = JSON.parse(tag);

            //获取封面
            var fileList = window.localStorage.getItem("fileList");
            console.log(fileList);

        },

        like() {
            this.isLike = !this.isLike;
        },

        collect() {
            this.isCollect = !this.isCollect;
        }



    }
}
</script>


<style scoped>
.left {
    background-color: #cccccc;
    min-width: 100px;
    height: 1000px;
    padding: 10px;
    margin: 2%;
    margin-left: 12%;
}

.contianer {
    min-width: 1270px;
}



.articleFooter {
    margin-top: 60px;
    margin-left: 70%;
}

.like {

    background-image: url("../../../assets/images/blogAdmin/like.svg");
    background-size: 30px;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-left: 50px;
}

.noLike {

    background-image: url("../../../assets/images/blogAdmin/noLike.svg");
    background-size: 30px;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-left: 50px;


}

.collect {

    background-image: url("../../../assets/images/blogAdmin/collect.svg");
    background-size: 30px;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-left: 50px;
}

.noCollect {

    background-image: url("../../../assets/images/blogAdmin/noCollect.svg");
    background-size: 30px;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-left: 50px;
}

.comment {
    background-image: url("../../../assets/images/blogAdmin/comment.svg");
    background-size: 30px;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-left: 50px;
}

i {
    padding: 10px;
    margin-left: 2%;
}

h1 {
    font-size: 29px;
    text-align: center;
}
</style>

<style>
* {
    font-family: "Hiragino Sans GB"
}




.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: white;
    padding: 50px;
    padding-top: 20px;
    min-width: 850px;
}

.PSrticletag {
    display: inline;
    margin-left: 20%;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {

    border-radius: 4px;
    min-height: 36px;
}



.bg-purple-darkRigth {
    background: #99a9bf;

}

.bg-purpleRigth {
    background: white;
    padding: 50px;

}

.bg-purple-lightRigth {
    background: #e5e9f2;
}

.grid-contentRigth {
    border-radius: 4px;
    min-height: 36px;
}



.row-bg {
    padding: 10px;
    background-color: #f9fafc;
}
</style>
